<template>
  <div class="detail-dialog-container">
    <div class="detail-dialog">
      <el-dialog :visible.sync="visible"
           width="100%" top="8vh"
           @close="$emit('update:showdialog', false)">
        <div slot="title" class="titleFont ">
          <el-tabs  v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="产品信息" name="first">
            </el-tab-pane>
            <el-tab-pane label="销售情况" name="second">
            </el-tab-pane>
            <el-tab-pane label="用户分析" name="third">
            </el-tab-pane>
            <el-tab-pane label="用户点评/关注" name="fourth">
            </el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <indo-prod :productCode="productCode" v-if="activeName == 'first'" :key="`${productCode}first${searchDate.num}${searchDate.firstTime}${searchDate.lastTime}`"></indo-prod>
          <info-sales :productCode="productCode" :searchDate="searchDate" v-if="activeName == 'second'" :key="`${productCode}second${searchDate.num}${searchDate.firstTime}${searchDate.lastTime}`"></info-sales>
          <customer-analysis :productCode="productCode" v-if="activeName == 'third'" :key="`${productCode}third${searchDate.num}${searchDate.firstTime}${searchDate.lastTime}`"></customer-analysis>
          <customer-concern v-if="activeName == 'fourth'" :key="`${productCode}fourth${searchDate.num}${searchDate.firstTime}${searchDate.lastTime}`"></customer-concern>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import IndoProd from './infoProd'
  import InfoSales from './infoSales'
  import CustomerAnalysis from './customerAnalysis'
  import CustomerConcern from './customerConcern'
  import {mapActions, mapMutations} from 'vuex'
  import * as opreate from 'api/getData'

  export default {
      name: "detail-dialog",
      components:{
        IndoProd,
        InfoSales,
        CustomerAnalysis,
        CustomerConcern
      },
      props:{
        showdialog: {
          type: Boolean,
          default: false
        },
        productCode:{
          type:String,
          default:''
        },
        searchDate:{
          type: Object,
          default:() => {}
        }
      },
      data() {
          return {
            visible: this.showdialog,
            activeName: 'first',
            commentCount: '',
            commentCountMessage: '',
            discussCommentInit: ''
          }
      },
      mounted() {
      },
      methods: {
        ...mapMutations(["updateProductCode"]),
        ...mapActions(["obtainCustomerConcern", "obtainCommentCount","obtainDiscussCareRank"]),
        handleClick(tab, event) {}
      },
      watch: {
        showdialog(newVal){
          this.visible = newVal
        },
        productCode(newVal){
          this.activeName = 'first'
          this.updateProductCode(newVal)
          this.obtainCommentCount({ productCode: newVal })
          this.obtainCustomerConcern({ productCode: newVal, sentimentType: 'all'})
          this.obtainDiscussCareRank({ productCode: newVal })
        }
      }
  }
</script>

<style lang="less" scoped>
.titleHeader{
  font-weight: bold;
}
</style>
